
//唯品会需要先选店铺类型


import React, { useEffect } from "react";
import CommonModal from '@/components/CommonModal';
import { Form, Radio,  } from 'antd';
import { renderRoleType } from '@/utils/utils.jsx';
import { layout1 } from '@/utils/config';

//获取用户角色类型
const roleType = renderRoleType();

export default ({ visible, handleOk, handleCancel }) => {

  const [ form ] = Form.useForm();

  useEffect(() => {
    if(visible) {
      form.resetFields();
    }
  }, [ visible ])


  const handleClick = () => {
    form.validateFields().then(val => {
      handleOk(val)
    }).catch(() => {

    })
  }

  const radioStyle = {
    display: 'flex',
    height: '24px',
    marginBottom: '12px',
    lineHeight: '24px',
  }

  return (
    <CommonModal
      title='唯品会授权信息确认'
      visible={visible}
      width='600px'
      onCancel={handleCancel}
			onOk={handleClick}
    >
      <div className='common-color11' style={{ paddingLeft:  '24px' }}>
        <Form 
            name='shop-authorize-wph'
            form={form}
            style={{ margin: 0 }}
						{ ...layout1 }
          >
						<Form.Item 
              name="type"
              label="店铺类型"
              rules={[
                { required: true, message: '请选择店铺类型' },
              ]}
            >
              <Radio.Group>
								<Radio value='wph_jitx'>
									JITX
								</Radio>
								<Radio value='wph'>
									MP
								</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item 
              name="spdFlag"
              label="同步订单去往"
              rules={[
                { required: true, message: '同步订单去往未设置' },
              ]}
            >
              <Radio.Group>
                {
                  roleType != 'zifa' && 
                  <Radio value={1} style={radioStyle}>
                    订单处理页面（自发、代发业务）
                  </Radio>
                }
                {
                  (roleType == 'zjf' || roleType == 'zifa') &&
                  <Radio value={3} style={radioStyle}>
                    自发打印页面
                  </Radio>
                }
              </Radio.Group>
            </Form.Item>
          </Form>
          {
            roleType == 'zjf' && <p className='common-color13'>注：授权店铺成功后，平台同步的订单会去往订单处理页面或自发打印页面，两者必须取其一，请谨慎选择自己所需的业务；如需修改可在店铺设置里修改选项，但是之前同步过的订单不能再修改</p>
          }
      </div>
    </CommonModal>
  );
};